<template>
  <button :class="{ active: isSelect }" class="btn" @click="changeSelectBtn">
    {{ text }}
  </button>
</template>

<script>
export default {
  props: ["text", "isSelect", "index"],
  methods: {
    changeSelectBtn() {
      this.$emit("clickBtn", this.index);
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.btn {
  color: #333333;
  background: #f5f5f6;
  width: 120px;
  height: 38px;
  border: none;
  font-weight: bold;
  cursor: pointer;
}
.active {
  background: #1992fc;
  color: #ffffff;
}
</style>